<!--
名称: 表格组件2
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <div style="width: 100%; overflow: auto;">
        <el-table
            :data="tableData"
            border
            size="mini"
            stripe
            :render-header="true"
            :height="height"
            :header-cell-style="{background:'#b9d4d7',color:'#606266',fontSize: '12px'}"
            :row-style="{height: '35px',border: 'none'}"
            :cell-style="{padding: '0'}"
        >
            <af-table-column
                header-align="center"
                v-for="(item,index) in tableData[0]" :key="index"
                :prop="index"
                :label="item.colHeaderName || index"
                >
            </af-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
            v-if="tableData"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[15, 25, 50, 100]"
            :page-size="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordNumber">
        </el-pagination>

    </div>

</template>

<script>
    export default {
        name: 'ATableFit',
        props: {
            tableData: {
                type: Array
            },
            height: {
                type: String,
                default: 'calc(100% - 1px)'
            },
            recordNumber: {
                type: Number,
                default: 15
            }
        },
        data () {
            return {
                currentPage: 1, // 默认显示第1页面
                pageNum: 1, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
                pageSize: 15// 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
            }
        },
        methods: {
            // 改变页大小
            handleSizeChange (val) {
                console.log(`每页 ${val} 条`)
                this.pageSize = val
                // 调用父组件查询接口
                this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
            },
            // 改变页码，调用父组件查询接口
            handleCurrentChange (val) {
                console.log(`当前页: ${val}`)
                this.pageNum = val
                this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
            }
        }
    }
</script>

<style scoped>

</style>
